<template>
  <div class="dashboard">
    <!-- 统计卡片 -->
    <el-row :gutter="20" class="stats-row">
      <el-col :xs="24" :sm="12" :md="6" v-for="stat in stats" :key="stat.title">
        <el-card class="stat-card" :class="stat.type">
          <div class="stat-content">
            <div class="stat-icon">
              <el-icon :size="32"><component :is="stat.icon" /></el-icon>
            </div>
            <div class="stat-info">
              <div class="stat-value">{{ stat.value }}</div>
              <div class="stat-title">{{ stat.title }}</div>
            </div>
          </div>
          <div class="stat-trend" v-if="stat.trend">
            <span :class="['trend', stat.trend > 0 ? 'up' : 'down']">
              {{ stat.trend > 0 ? '+' : '' }}{{ stat.trend }}%
            </span>
            <span class="trend-text">较昨日</span>
          </div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 图表区域 -->
    <el-row :gutter="20" class="charts-row">
      <el-col :xs="24" :lg="16">
        <el-card class="chart-card">
          <template #header>
            <div class="card-header">
              <span>访问趋势</span>
              <el-radio-group v-model="chartPeriod" size="small">
                <el-radio-button label="7d">7天</el-radio-button>
                <el-radio-button label="30d">30天</el-radio-button>
                <el-radio-button label="90d">90天</el-radio-button>
              </el-radio-group>
            </div>
          </template>
          <div ref="visitChartRef" class="chart"></div>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="8">
        <el-card class="chart-card">
          <template #header>
            <span>用户分布</span>
          </template>
          <div ref="userChartRef" class="chart"></div>
        </el-card>
      </el-col>
    </el-row>

    <!-- 快捷操作 -->
    <el-row :gutter="20" class="quick-actions-row">
      <el-col :xs="24" :lg="12">
        <el-card>
          <template #header>
            <span>快捷操作</span>
          </template>
          <div class="quick-actions">
            <el-button
              v-for="action in quickActions"
              :key="action.name"
              :type="action.type"
              :icon="action.icon"
              @click="$router.push(action.path)"
            >
              {{ action.name }}
            </el-button>
          </div>
        </el-card>
      </el-col>

      <el-col :xs="24" :lg="12">
        <el-card>
          <template #header>
            <span>最新动态</span>
          </template>
          <div class="activities">
            <div
              v-for="activity in activities"
              :key="activity.id"
              class="activity-item"
            >
              <div class="activity-icon">
                <el-icon :color="activity.color"><component :is="activity.icon" /></el-icon>
              </div>
              <div class="activity-content">
                <div class="activity-title">{{ activity.title }}</div>
                <div class="activity-time">{{ activity.time }}</div>
              </div>
            </div>
          </div>
        </el-card>
      </el-col>
    </el-row>
  </div>
</template>

<script setup>
import { ref, onMounted, onUnmounted } from 'vue'
import * as echarts from 'echarts'
import {
  User,
  Box,
  List,
  Money,
  Picture,
  Setting
} from '@element-plus/icons-vue'

const visitChartRef = ref()
const userChartRef = ref()
const chartPeriod = ref('7d')
let visitChart = null
let userChart = null

// 统计数据
const stats = [
  {
    title: '用户总数',
    value: '1,234',
    icon: User,
    type: 'primary',
    trend: 12.5
  },
  {
    title: '产品数量',
    value: '89',
    icon: Box,
    type: 'success',
    trend: 8.2
  },
  {
    title: '进行中任务',
    value: '456',
    icon: List,
    type: 'warning',
    trend: -2.3
  },
  {
    title: '本月结算',
    value: '¥12,345',
    icon: Money,
    type: 'danger',
    trend: 15.8
  }
]

// 快捷操作
const quickActions = [
  { name: '添加Banner', icon: Picture, type: 'primary', path: '/banner' },
  { name: '用户管理', icon: User, type: 'success', path: '/users' },
  { name: '产品管理', icon: Box, type: 'warning', path: '/products' },
  { name: '任务审核', icon: List, type: 'danger', path: '/tasks' }
]

// 最新动态
const activities = [
  {
    id: 1,
    title: '新增用户 张三',
    time: '5分钟前',
    icon: User,
    color: '#409eff'
  },
  {
    id: 2,
    title: '产品「手工制品」已上架',
    time: '15分钟前',
    icon: Box,
    color: '#67c23a'
  },
  {
    id: 3,
    title: '任务「手工制作」已完成审核',
    time: '30分钟前',
    icon: List,
    color: '#e6a23c'
  },
  {
    id: 4,
    title: '完成订单结算 ¥500',
    time: '1小时前',
    icon: Money,
    color: '#f56c6c'
  },
  {
    id: 5,
    title: 'Banner「中秋活动」已发布',
    time: '2小时前',
    icon: Picture,
    color: '#909399'
  }
]

// 初始化访问趋势图表
const initVisitChart = () => {
  if (!visitChartRef.value) return

  visitChart = echarts.init(visitChartRef.value)

  const option = {
    tooltip: {
      trigger: 'axis',
      axisPointer: {
        type: 'shadow'
      }
    },
    grid: {
      left: '3%',
      right: '4%',
      bottom: '3%',
      containLabel: true
    },
    xAxis: {
      type: 'category',
      data: ['周一', '周二', '周三', '周四', '周五', '周六', '周日'],
      axisLine: {
        lineStyle: {
          color: '#e4e7ed'
        }
      }
    },
    yAxis: {
      type: 'value',
      axisLine: {
        lineStyle: {
          color: '#e4e7ed'
        }
      },
      splitLine: {
        lineStyle: {
          color: '#f0f2f5'
        }
      }
    },
    series: [
      {
        name: '访问量',
        type: 'bar',
        data: [120, 200, 150, 80, 70, 110, 130],
        itemStyle: {
          color: new echarts.graphic.LinearGradient(0, 0, 0, 1, [
            { offset: 0, color: '#83bff6' },
            { offset: 0.5, color: '#188df0' },
            { offset: 1, color: '#188df0' }
          ])
        }
      }
    ]
  }

  visitChart.setOption(option)
}

// 初始化用户分布图表
const initUserChart = () => {
  if (!userChartRef.value) return

  userChart = echarts.init(userChartRef.value)

  const option = {
    tooltip: {
      trigger: 'item',
      formatter: '{a} <br/>{b}: {c} ({d}%)'
    },
    legend: {
      bottom: '10%',
      left: 'center'
    },
    series: [
      {
        name: '用户分布',
        type: 'pie',
        radius: ['40%', '70%'],
        avoidLabelOverlap: false,
        itemStyle: {
          borderRadius: 10,
          borderColor: '#fff',
          borderWidth: 2
        },
        label: {
          show: false,
          position: 'center'
        },
        emphasis: {
          label: {
            show: true,
            fontSize: 20,
            fontWeight: 'bold'
          }
        },
        labelLine: {
          show: false
        },
        data: [
          { value: 1048, name: '普通用户' },
          { value: 735, name: 'VIP用户' },
          { value: 580, name: '企业用户' },
          { value: 484, name: '体验用户' }
        ]
      }
    ]
  }

  userChart.setOption(option)
}

// 处理窗口大小变化
const handleResize = () => {
  visitChart?.resize()
  userChart?.resize()
}

onMounted(() => {
  setTimeout(() => {
    initVisitChart()
    initUserChart()
  }, 100)

  window.addEventListener('resize', handleResize)
})

onUnmounted(() => {
  window.removeEventListener('resize', handleResize)
  visitChart?.dispose()
  userChart?.dispose()
})
</script>

<style lang="scss" scoped>
.dashboard {
  .stats-row {
    margin-bottom: 20px;
  }

  .stat-card {
    position: relative;
    overflow: hidden;

    &.primary {
      border-left: 4px solid #409eff;
    }

    &.success {
      border-left: 4px solid #67c23a;
    }

    &.warning {
      border-left: 4px solid #e6a23c;
    }

    &.danger {
      border-left: 4px solid #f56c6c;
    }

    .stat-content {
      display: flex;
      align-items: center;
      margin-bottom: 16px;

      .stat-icon {
        width: 60px;
        height: 60px;
        border-radius: 50%;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 16px;

        .el-icon {
          color: #fff;
        }
      }

      .stat-info {
        flex: 1;

        .stat-value {
          font-size: 24px;
          font-weight: 600;
          color: #2c3e50;
          line-height: 1;
          margin-bottom: 4px;
        }

        .stat-title {
          font-size: 14px;
          color: #909399;
        }
      }
    }

    .stat-trend {
      display: flex;
      align-items: center;
      font-size: 12px;

      .trend {
        font-weight: 600;
        margin-right: 4px;

        &.up {
          color: #67c23a;
        }

        &.down {
          color: #f56c6c;
        }
      }

      .trend-text {
        color: #909399;
      }
    }

    &.primary .stat-icon {
      background: linear-gradient(135deg, #409eff, #66b1ff);
    }

    &.success .stat-icon {
      background: linear-gradient(135deg, #67c23a, #85ce61);
    }

    &.warning .stat-icon {
      background: linear-gradient(135deg, #e6a23c, #ebb563);
    }

    &.danger .stat-icon {
      background: linear-gradient(135deg, #f56c6c, #f78989);
    }
  }

  .charts-row {
    margin-bottom: 20px;
  }

  .chart-card {
    .card-header {
      display: flex;
      justify-content: space-between;
      align-items: center;
    }

    .chart {
      height: 300px;
    }
  }

  .quick-actions-row {
    .quick-actions {
      display: grid;
      grid-template-columns: repeat(auto-fit, minmax(140px, 1fr));
      gap: 12px;
    }
  }

  .activities {
    .activity-item {
      display: flex;
      align-items: center;
      padding: 12px 0;
      border-bottom: 1px solid #f0f2f5;

      &:last-child {
        border-bottom: none;
      }

      .activity-icon {
        width: 40px;
        height: 40px;
        border-radius: 50%;
        background-color: #f0f2f5;
        display: flex;
        align-items: center;
        justify-content: center;
        margin-right: 12px;
      }

      .activity-content {
        flex: 1;

        .activity-title {
          font-size: 14px;
          color: #2c3e50;
          margin-bottom: 4px;
        }

        .activity-time {
          font-size: 12px;
          color: #909399;
        }
      }
    }
  }
}

@media (max-width: 768px) {
  .dashboard {
    .stat-card {
      .stat-content {
        .stat-icon {
          width: 50px;
          height: 50px;
          margin-right: 12px;
        }

        .stat-info .stat-value {
          font-size: 20px;
        }
      }
    }

    .chart-card .chart {
      height: 250px;
    }

    .quick-actions {
      grid-template-columns: repeat(2, 1fr) !important;
    }
  }
}
</style>